  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
      // 纵横比
      aspectRatio: 1,
      // 指定预览区域
      preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  /*
  需求：
  1.点击选择图片，触发file文件框的点击事件-->新增一个file文件框
  2.触发file的change事件，展示图片至右侧cropper区
    2.1 将图片转化为临时url(内存存储)-->字符串类型url地址
    2.2 将临时的url地址赋值给展示区
       2.2.1 先销毁展示区原有的图片
       2.2.2 再添加图片地址
       2.2.3 重新调用cropper方法，将自己图片渲染
  3.点击上传图片
    3.1 将图片预览区的图片转化为base64格式的字符串(开发文档需求传输base64格式)
    3.2 发送请求将图片地址传给后台
    3.3 调用index页面的渲染用户头像方法实时更新头像
  */

  $(function () {

      // 1.点击选择图片，触发file文件框的点击事件
      $('.selectBtn').on('click', function () {
          $('#imgFile').click()
      })

      // 2.触发file的change事件，展示图片至右侧cropper区
      $('#imgFile').on('change', function () {
          //非空校验
          if (this.files[0] === undefined) {
              return layui.layer.msg('请更换图片')
          }
          layui.layer.msg('恭喜您，更换头像成功')
          //2.1 将图片文件转化为url临时路径(内存存储)-->字符串类型url地址
          let url = URL.createObjectURL(this.files[0])
          // 2.2 将base64格式的url地址赋值给展示区
          //先销毁，再给图片盒子赋值，最后渲染预览区
          $image.cropper("destroy").attr('src', url).cropper(options)
      })

      // 3.点击上传图片
      $('.upBtn').on('click', function () {
          //3.1 将图片预览区的图片转化为base64格式的字符串(开发文档需求传输base64格式)
          let baseURL = $image.cropper('getCroppedCanvas', {
              width: 100,
              height: 100
          }).toDataURL('img/png')
          //3.2 发送请求将图片地址传给后台
          axios({
              method: 'POST',
              url: '/my/update/avatar',
              //后端只能接受application/x-www-form-urlencoded格式的数据，且需要编码
              data: 'avatar=' + encodeURIComponent(baseURL)
          }).then(({
              data: res
          }) => {
              console.log(res)
              if (res.status != 0) {
                  return layui.layer.msg(res.message)
              }
              // 将图片传回后端后，即可渲染对应页面
              layui.layer.msg('恭喜您，修改用户头像成功')
              window.parent.getUserInfo()
          })
      })
  })